<template>
	<view class="fwxqList">
		<view class="xqListItem">
			<view class="spaceBet">
				<view class="xqName">第一节 员工心理健康咨询</view>
				<view class="joinBtn" v-if="currPage == 'ttfwDet'">报名</view>
				<view class="status" v-if="currPage == 'myTtfwList'">已结束</view>
			</view>
			<view class="hasFlex alignCen">
				<view class="xqType kc">课程</view>
				<view class="line"></view>
				<view class="onLine">线上</view>
				<view class="stTime">2024-12-20 15:22:22</view>
				<view class="currStatus" v-if="currPage == 'ttfwDet'">
					<!-- <text class="iconfont icon-qyJxz"></text>
					<text>进行中</text> -->
					<!-- <text class="iconfont icon-qywks"></text>
					<text>未开始</text> -->
					<text class="iconfont icon-qyyjs"></text>
					<text>已结束</text>
				</view>
			</view>
		</view>
		<!-- <view class="xqListItem">
			<view class="spaceBet">
				<view class="xqName">第二节 员工心理健康咨询</view>
				<view class="status ing">进行中</view>
			</view>
			<view class="hasFlex">
				<view class="xqType fw">服务</view>
				<view class="line"></view>
				<view class="offLine">线下</view>
				<view class="stTime">2024-12-20 15:22:22</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		props:{
			currPage:{
				type:String,
				default:'ttfwDet'//ttfwDet myTtfwList
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/scss/qyFwxmList.scss"; 
	.fwxqList{
		margin-top: 20rpx;
		.xqListItem{
			padding: 20rpx 15rpx;
			background:$comBg ;
			border-radius: $comRad;
			margin-bottom: 20rpx;
			.spaceBet,
			.hasFlex{
				align-items: center;
			}
			.spaceBet{
				margin-bottom: 15rpx;
			}
		}
		.xqName{
			@include comFontStyle($size:28rpx);
		}
		.status{
			color: $qy-mainb;
			font-size: 24rpx;
			&.ing{
				color: $pss-qy-main;
			}
		}
		.joinBtn{
			height: 42rpx;
			line-height: 42rpx;
			background: $pss-qy-main;
			color: #fff;
			padding: 0 20rpx;
			font-size: 22rpx;
			border-radius: 8rpx;
		}
		.xqType{
			height: 30rpx;
			line-height: 32rpx;
			padding: 0 10rpx;
			font-size: 20rpx;
			border-radius: $comRad / 2;
			&.kc{
				border: 1rpx solid $pss-qy-main;
				background: #DBE6FE;
				color: $pss-qy-main;
			}
			&.fw{
				border: 1rpx solid $pss-qy-danger;
				background: #F9E2E8;
				color: $pss-qy-danger;
			}
			&.zb{
				border: 1rpx solid #00BAAD;
				background: #D7EEEF;
				color: #00BAAD;
			}
			&.cp{
				border: 1rpx solid $pss-qy-warn;
				background: #F2F0EB;
				color: $pss-qy-warn;
			}
		}
		.line{
			@include comLine(15rpx,  $pss-qy-main);
		}
		.onLine,
		.offLine,
		.stTime,
		.currStatus{
			font-size: 24rpx;
		}
		.onLine{
			color: $pss-qy-main;
		}
		.offLine{
			color: $pss-qy-warn;
		}
		.stTime,
		.currStatus{
			color: $qy-main6;
			margin-left: 15rpx;
		}
		.currStatus{
			&.ing{
				color: $pss-qy-main;
			}
			.iconfont{
				font-size: 26rpx;
				margin-right: 8rpx;
			}
		}
	}
</style>